<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-17 11:27:14
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:35:43
 * @FilePath: \nien-vue3-admin\src\views\finance\receiverManame\reconciliationManagement\Receivable\airSeaExpress\components\OrderDetailDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog 
    v-model="visible"
    title="订单明细"
  >
    <customContainer v-if="visible" ref="customContainerRef" :config="config" />
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { ElButton, ElMessageBox, ElMessage } from 'element-plus'
import { getSeaAirSendFinanceAccountOrderDetails, eliminate } from '@/api/finance/receiverManange'
import { indexObject } from '../../receiveabeTypes'

const visible = ref<boolean>(false)
const route = useRoute()
const customContainerRef = ref()
const multipleSelection = ref<indexObject[]>([])
const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  serialNo: route.params.serialNo,
  orderNo: '',
})
const config = reactive<indexObject>({
  query: {
    fields: [],
    queryParams,
    formOption: {},
  },
  table: {
    columns: [
      { label: '订单号', align: 'center', prop: 'orderNo' },
      { label: '费用名称', align: 'center', prop: 'feeName' },
      { label: '待确认金额', align: 'center', prop: 'amount' },
      { label: '预充值额度', align: 'center', prop: 'preChargedAmount' },
      { label: '币种', align: 'center', prop: 'currency' },
      { label: '操作人', align: 'center', prop: 'receivingUser' },
      { label: '操作时间', align: 'center', prop: 'receivingDate' },
      {
        label: '操作',
        align: 'center',
        width: '200',
        fixed: 'right',
        render(h, params) {
          return h(
            ElButton,
            {
              text: true,
              type: 'primary',
              onClick: () => {
                ElMessageBox.confirm('是否单笔剔除？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                }).then(() => {
                  eliminate({
                    id: params.row.id,
                  }).then(res => {
                    if (res.code === 200) {
                      ElMessage.success('操作成功！')
                      customContainerRef.value.getList()
                    }
                  })
                })
              },
            },
            {
              default: () => '单笔剔除',
            },
          )
        },
      },
    ],
    event: {
      onSelectionChange: (rows) => { 
        multipleSelection.value = rows
      },
    },
  },
  api: getSeaAirSendFinanceAccountOrderDetails,
})

const open = (row:{orderNo:string, [key:string]:string}):void => {
  queryParams.orderNo = row.orderNo
  visible.value = true
}

defineExpose({
  open,
}) 
</script>